<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib prefix="s" uri="/struts-tags"%>
<s:set name="listadocarrito" value="#session.listadocarrito" />

  <link rel="shortcut icon" href="img/icon/favicon.ico">

  <link href="../css/bootstrap.css" rel="stylesheet">
  <link href="../css/style.css" rel="stylesheet">

 
  <div id="cuerpo">


    <!-- CONTENIDO START -->
    
    <s:form name="pago">
    
    <s:hidden id="formapago" name="formapago"/>
    <s:hidden id="totalprecioiva" name="totalprecioiva"/>
    <s:hidden id="facturacionc" name="facturacionc" value="1"/>
    <s:hidden id="mostrar" name="mostrar"  value="0"/>
    
    
    <div id="contenido">

        <div class="fila">
          <div class="contenido_borde_izq">
          <div class="contenido_borde_der">
            <div class="columna_derecha">

            <h2 class="smaller"><span class="verde">DATOS </span> <span class="rosa">DE ENVÍO</span> Y PAGO</h2>


            <div class="formulari1o">
            
               <h3>DATOS DE ENVÍO</h3>


               <div class="formulario_doble" >

                   <div class="row">

                     <div class="col-lg-6">
                       <div class="form-group">
                         <label for="nombre" class="control-label">Nombre</label>
                         <input type="text" class="form-control" id="nombre" name="nombre" placeholder="nombre" value="<s:property value="usuariovo.nombre" />">
                     
                       </div>
                       <div class="form-group">
                         <label for="telefono" class="control-label">Teléfono</label>
                           <input type="text" class="form-control" id="telefono" name="telefono" placeholder="Teléfono" value="<s:property value="medioscvo.telefono" />">
                       </div>
                       <div class="form-group">
                         <label for="direccion" class="control-label">Tipo vía</label>
                          <select class="form-control" id="tipovia" name="tipovia">
                        	  	 		<option value="0"> Seleccionar</option>
			                         <s:iterator value="listatipovia" >
			                         	 <option value="<s:property value="id" />" >  <s:property value="nombre" /></option>
			                         </s:iterator>
	                         	</select>
                       </div>
                        <div class="form-group">
                         <label for="codigoPostal" class=" control-label">Código Postal</label>
                           <input type="text" class="form-control" id="codigoPostal" name="codigoPostal" placeholder="Código Postal" value="<s:property value="medioscvo.cp" />">
                       </div>
                        
						 <div class="form-group">
                         <label for="ciudad" class="control-label">Ciudad</label>

 								<s:include value="/liwalo/combociudad.jsp" />
                       </div>
                       
                     </div>
                     <div class="col-lg-6 pull-right">
                       <div class="form-group">
                         <label for="apellidos" class="control-label">Apellidos</label>
                         <input type="text" class="form-control" id="apellidos" name="apellidos" placeholder="apellidos" value="<s:property value="usuariovo.apellidos" />">
                       </div>
                       <div class="form-group">
                         <label for="email" class="control-label">Email</label>
                         <input type="text" class="form-control" id="email" name="email" placeholder="email" value="<s:property value="usuariovo.email" />">
                       </div>
                       <div class="form-group">
                         <label for="direccion" class="control-label">Dirección</label>
                           <input type="text" class="form-control" id="direccion" name="direccion" placeholder="Dirección" value="<s:property value="medioscvo.direccion" />" >
                       </div>
                      <div class="form-group">
                          <label for="provincia" class="control-label">Provincia</label>

								<select class="form-control" id="provincia" name="provincia" onchange="javascript:comboProvincia()">
                        	  	 		<option value="0"> Seleccionar</option>
			                         <s:iterator value="listadoprov" >
			                         	 <option value="<s:property value="id" />" >  <s:property value="nombre" /></option>
			                         </s:iterator>
	                         	</select>
	                         	
                        </div>
                       <div class="form-group">
                          <label for="pais" class="control-label">País</label>
                            <input type="text" class="form-control" placeholder="País" value="España" disabled="disabled">
                        </div>
                     </div>
                   </div>

               </div>







               <h3>DATOS DE FACTURACIÓN</h3>
               <div class="checkbox_envio">
                  <label>
                    <input type="checkbox" id="facturacion" onclick="javascript:mostrarfactura()" checked>Los mismos que los datos de envío
                  </label>
                </div>

                <div id="formulario_facturacion" class="formulario_doble" >

                    <div class="row">

                      <div class="col-lg-6">
                        <div class="form-group">
                          <label for="nombref" class="control-label">Nombre</label>
                          <input type="text" class="form-control" id="nombref" name="nombref" placeholder="nombre" >
                        </div>
                        <div class="form-group">
                          <label for="telefonof" class="control-label">Teléfono</label>
                            <input type="text" class="form-control" id="telefonof" name="telefonof" placeholder="Teléfono">
                        </div>
                        <div class="form-group">
                         <label for="direccion" class="control-label">Tipo vía</label>
                          <select class="form-control" id="tipoviaf" name="tipoviaf">
                        	  	 		<option value="0"> Seleccionar</option>
			                         <s:iterator value="listatipovia" >
			                         	 <option value="<s:property value="id" />" >  <s:property value="nombre" /></option>
			                         </s:iterator>
	                         	</select>
                       </div>
                       
                        <div class="form-group">
                          <label for="codigoPostalf" class=" control-label">Código Postal</label>
                            <input type="text" class="form-control" id="codigoPostalf" name="codigoPostalf" placeholder="Código Postal">
                        </div>
                        
                        <div class="form-group">
                          <label for="ciudadf" class="control-label">Ciudad</label>
                          
                          <s:include value="/liwalo/combociudadf.jsp" />
                          
                        </div>
                       
                       
                       
                      </div>
                      <div class="col-lg-6 pull-right">
                        <div class="form-group">
                          <label for="apellidosf" class="control-label">Apellidos</label>
                          <input type="text" class="form-control" id="apellidosf" name="apellidosf" placeholder="apellidos">
                        </div>
                        <div class="form-group">
                          <label for="emailf" class="control-label">Email</label>
                          <input type="text" class="form-control" id="emailf" name="emailf" placeholder="email">
                        </div>
                         <div class="form-group">
                          <label for="direccionf" class="control-label">Dirección</label>
                            <input type="text" class="form-control" id="direccionf" name="direccionf" placeholder="Dirección">
                        </div>
                         <div class="form-group">
                           <label for="provinciaf" class="control-label">Provincia</label>
                             <select class="form-control" id="provinciaf" name="provinciaf" onchange="javascript:comboProvinciaf()">
                        	  	 		<option value="0"> Seleccionar</option>
			                         <s:iterator value="listadoprov" >
			                         	 <option value="<s:property value="id" />" >  <s:property value="nombre" /></option>
			                         </s:iterator>
	                         	</select>
                         </div>
                           <div class="form-group">
                           <label for="paisf" class="control-label">País</label>
                             <input type="text" class="form-control" placeholder="País" value="España" disabled="disabled">
                         </div>
                       
                      </div>
                    </div>

                </div>

                <h3>ESCOGE UNA FORMA DE PAGO</h3>

                 <div class="centrado">
                     <div class="row width80">
                       <div class="col-lg-6">
                         <div href="" id="tarjeta">PAGAR CON TARJETA DE CRÉDITO<br/>
                         <img src="../img/tarjetas.jpg" alt="tarjeta credito" onclick="document.pago.formapago.value=0;" /></div>
                       </div>

                       <div class="col-lg-6 pull-right">
                         <div href="" id="paypal">PAGAR CON PAYPAL<br/>
                         <img src="../img/paypal.png" alt="paypal" onclick="document.pago.formapago.value=1;"/></div>
                       </div>
                     </div>
                 </div>



                  <div class="form-group padding50">
                    <label for="inputEnviar" class="col-lg-5 control-label"></label>
                    <div class="col-lg-5">
                      <button type="button" class="btn  boton_envio" id="boton_pagar" onclick="javascript:pagar()">PAGAR</button>
                    </div>
                  </div>


          
              </div>

                <hr/>


            <div class="sumatorio">
              <div class="fila_suma">
                <div class="pull-left">Subtotal (precio sin iva)</div>
                <div class="pull-right"><s:property value="totalprecio" />€</div>
              </div>

              <div class="fila_suma">
                <div class="pull-left">IVA</div>
                <div class="pull-right">5€</div>
              </div>

              <div class="fila_suma">
                <div class="pull-left">Gastos de envío</div>
                <div class="pull-right">7€</div>
              </div>

              <div class="fila_suma">
                <div class="pull-left bigger">Total</div>
                <div class="pull-right bigger"><s:property value="totalprecioiva" />€</div>
              </div>

            </div>

            </div>


          </div>
          </div>
            <div class="contenido_borde_abajo">
              <div class="esquina_izq"></div>
              <div class="esquina_der"></div>
            </div>
        </div>

        <div class="columna_izquierda">
  <div class="pestania">
    <div class="pestania_top"></div>
    <s:a action="Inicio" title="Volver a la Home"><span class="bigger" >VOLVER</span> A LA HOME</s:a>
    <div class="pestania_bottom"></div>
  </div>
</div>
    </div>
    
    </s:form>
    
    
   
    
    
    <!-- CONTENIDO END -->

  </div>



<script src="../js/jquery.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/livevalidation.js"></script>

  <SCRIPT TYPE="text/javascript">
  $('#boton_pagar').attr('disabled',true);
  $('#formulario_facturacion').hide();

  $('#tarjeta').on('click', function (e) {
      e.preventDefault();
     document.getElementById('paypal').className = "";
      document.getElementById('tarjeta').className = "seleccionado";
      $('#boton_pagar').attr('disabled',false);
  });
  $('#paypal').on('click', function (e) {
      e.preventDefault();
      document.getElementById('paypal').className = "seleccionado";
      document.getElementById('tarjeta').className = "";
      $('#boton_pagar').attr('disabled',false);
  });
 
  
  $('#tipovia > option[value="<s:property value='medioscvo.tipoViaId.id' />"]').attr('selected', 'selected');
	$('#ciudad > option[value="<s:property value='medioscvo.listadoCiudadId.id' />"]').attr('selected', 'selected');
  $('#provincia > option[value="<s:property value='medioscvo.listadoProvId.id' />"]').attr('selected', 'selected');
  
  function pagar(){
	 

	  var fact=document.pago.facturacionc.value;
	  var via=document.pago.tipovia.value;
	  var viaf=document.pago.tipoviaf.value;
	  var provincia=document.pago.provincia.value;
	  var provinciaf=document.pago.provinciaf.value;
	  var ciudad=document.pago.ciudad.value;
	  var ciudadf=document.pago.ciudadf.value;
	  var formapago=document.pago.formapago.value;
	
	  var ok=0;
	 
	  
	  if(fact==0){
		  if( (via==0) || (viaf==0) || (ciudad==0) || (ciudadf==0) || (provincia==0) || (provinciaf==0) ) {
			  alert('Verificar que los campos : Tipo via , Proviancia o Ciudad esten llenos');
		  }else{
			  ok=1;
		  }
	  }
	  
	  if(fact==1){

		  if( (via==0) || (ciudad==0) ||  (provincia==0) ){
				  alert('Verificar que los campos : Tipo via , Proviancia o Ciudad esten llenos');
			  }
		  else{
			  ok=1;
		  } 
		  
	  } 
		  
		  
			

	  
	  if(formapago==1){
			  if(ok==1){
				
				  document.pago.action="PagoTarjeta";
				  document.pago.submit(); 
	
		  }
		  
	  }
	  
	  
	  if(formapago==0){
		  if(ok==1){
			 
			  document.pago.action="PagoTarjetaCredito";
			  document.pago.submit(); 

	  }
	  
  }
	 
  }
  
  // Validaciones de formulario
  var inputNombre = new LiveValidation('nombre');
  inputNombre.add(Validate.Presence, { failureMessage: "Nombre obligatorio" });
  
  var inputTelefono = new LiveValidation('telefono');
  inputTelefono.add(Validate.Presence, { failureMessage: "Teléfono obligatorio" });
  inputTelefono.add(Validate.Numericality, { failureMessage: "El telefono debe de ser númerico" });

  var inputDireccion = new LiveValidation('direccion');
  inputDireccion.add(Validate.Presence, { failureMessage: "Dirección obligatorio" });

  var inputProvincia = new LiveValidation('provincia');
  inputProvincia.add(Validate.Presence, { failureMessage: "Provincia obligatorio" });


  var inputApellidos = new LiveValidation('apellidos');
  inputApellidos.add(Validate.Presence, { failureMessage: "Apellidos obligatorio" });
  
  var inputEmail = new LiveValidation('email');
  inputEmail.add(Validate.Presence, { failureMessage: "Email obligatorio" });
  inputEmail.add( Validate.Email, { failureMessage: "Email no válido" });
  
  var inputCiudad = new LiveValidation('ciudad');
  inputCiudad.add(Validate.Presence, { failureMessage: "Ciudad obligatorio" });
  
  var inputCodigoPostal = new LiveValidation('codigoPostal');
  inputCodigoPostal.add(Validate.Presence, { failureMessage: "Código Postal obligatorio" });
  inputCodigoPostal.add(Validate.Numericality, { failureMessage: "El código postal debe de ser númerico" });

// Validacion de facturacion

 var inputNombref = new LiveValidation('nombref');
  inputNombref.add(Validate.Presence, { failureMessage: "Nombre obligatorio" });
  
  var inputTelefonof = new LiveValidation('telefonof');
  inputTelefonof.add(Validate.Presence, { failureMessage: "Teléfono obligatorio" });
  inputTelefonof.add(Validate.Numericality, { failureMessage: "El telefono debe de ser númerico" });

  var inputDireccionf = new LiveValidation('direccionf');
  inputDireccionf.add(Validate.Presence, { failureMessage: "Dirección obligatorio" });

  var inputProvinciaf = new LiveValidation('provinciaf');
  inputProvinciaf.add(Validate.Presence, { failureMessage: "Provincia obligatorio" });


  var inputApellidosf = new LiveValidation('apellidosf');
  inputApellidosf.add(Validate.Presence, { failureMessage: "Apellidos obligatorio" });
  
  var inputEmailf = new LiveValidation('emailf');
  inputEmailf.add(Validate.Presence, { failureMessage: "Email obligatorio" });
  inputEmailf.add( Validate.Email, { failureMessage: "Email no válido" });
  
  var inputCiudadf = new LiveValidation('ciudadf');
  inputCiudadf.add(Validate.Presence, { failureMessage: "Ciudad obligatorio" });
  
  var inputCodigoPostalf = new LiveValidation('codigoPostalf');
  inputCodigoPostalf.add(Validate.Presence, { failureMessage: "Código Postal obligatorio" });
  inputCodigoPostalf.add(Validate.Numericality, { failureMessage: "El código postal debe de ser númerico" });
  
  
  function volver(){
		
	  document.pago.action="Inicio";
      document.pago.submit();
}
  
  function validar(){
	 
	  var fact=document.pago.facturacionc.value;
	  var via=document.pago.tipovia.value;
	  var viaf=document.pago.tipoviaf.value;
	  var provincia=document.pago.provincia.value;
	  var provinciaf=document.pago.provinciaf.value;
	  var ciudad=document.pago.ciudad.value;
	  var ciudadf=document.pago.ciudadf.value;
	 
	  
	  
	  if(fact==0){
		  if( (via==0) || (viaf==0) || (ciudad==0) || (ciudadf==0) || (provincia==0) || (provinciaf==0) ) {
			  alert('Verificar que los campos : Tipo via , Proviancia o Ciudad esten llenos');
		  }
	  }else{
		  if( (via==0) || (ciudad==0) ||  (provincia==0) ){
			  alert('Verificar que los campos : Tipo via , Proviancia o Ciudad esten llenos');
		  }
	  }
  }
  

  
  function mostrarfactura(){
	  var mostrar=document.pago.mostrar.value;
	 
		if(mostrar==0){
			 $('#facturacion').prop('checked') ? $('#formulario_facturacion').hide() : $('#formulario_facturacion').show();
			 document.pago.facturacionc.value=0;
			 document.pago.mostrar.value=1;
			
		}else{
			 $('#facturacion').prop('checked') ? $('#formulario_facturacion').hide() : $('#formulario_facturacion').hide();
			 document.pago.facturacionc.value=1;
			 document.pago.mostrar.value=0;
			
		}
	   
	
  }
  
  
  function comboProvincia(){
	  var provincia=document.pago.provincia.value;
	  	 
	  $( "#ciudad" ).load( "${pageContext.servletContext.contextPath}/liwalo/ComboCiudad.action?provincia="+provincia, function() {
			
		});
	
	  
  }
  
  function comboProvinciaf(){
	  var provincia=document.pago.provinciaf.value;

	  
	 
	  $( "#ciudadf" ).load( "${pageContext.servletContext.contextPath}/liwalo/ComboCiudadf.action?provincia="+provincia, function() {
			
		});
	
	  
  }
  


  </SCRIPT>
<script type="text/javascript">if(!NREUMQ.f){NREUMQ.f=function(){NREUMQ.push(["load",new Date().getTime()]);var e=document.createElement("script");e.type="text/javascript";e.src=(("http:"===document.location.protocol)?"http:":"https:")+"//"+"js-agent.newrelic.com/nr-100.js";document.body.appendChild(e);if(NREUMQ.a)NREUMQ.a();};NREUMQ.a=window.onload;window.onload=NREUMQ.f;};NREUMQ.push(["nrfj","beacon-2.newrelic.com","a2cef8c3d3","1841284","Z11RZxdWW0cEVkYLDV4XdUYLVEFdClsdAAtEWkZQDlJBGgRFQhFMWFdARwBTG0IMUEURWENdQUUA",0,14749,new Date().getTime(),"","","","",""]);</script></body>
